<!--经纪人奖励管理- 批量申请-->
<template>
  <div class="brokerAwardBatch">
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="楼盘：">
        <el-select filterable  v-model="ruleForm.devId" placeholder="请选择">
          <el-option
            v-for="item in devList"
            :key="item.devId"
            :label="item.devName"
            :value="item.devId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="奖励方式：" prop="itemName">
        <el-select v-model="ruleForm.awardType" placeholder="请选择">
          <el-option label="购物卡" value="1"></el-option>
          <el-option label="现金" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="statistics">
      <i class="el-icon-warning" style="color:#2590fd"></i>
      <span>
        已选择<b>{{multipleSelectionAll.length}}</b> 项数据，奖励金额合计为 <b>{{nodeAmounts}}</b>元。
      </span>
    </div>
    <el-table @selection-change="handleSelectionChange" :data="tableData" ref="multipleTable" border style="width: 100%">
      <el-table-column type="selection" width="55" :selectable="checkboxT"></el-table-column>
      <el-table-column prop="brokerName" label="经纪人"></el-table-column>
      <el-table-column prop="companyName" label="所属经纪公司"></el-table-column>
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名"></el-table-column>
      <el-table-column :formatter="customerPhone" label="客户手机号"></el-table-column>
      <el-table-column prop="devName" label="楼盘"></el-table-column>
      <el-table-column prop="houseNum" label="房间号"></el-table-column>
      <el-table-column prop="nodeName" label="结佣类别"></el-table-column>
      <el-table-column :formatter="nodeAmount" label="奖励金额（元）"></el-table-column>
      <el-table-column  label="奖励方式">
        <template slot-scope="scope">
          <span v-if="scope.row.awardType == 1">购物卡</span>
          <span v-else>现金</span>
        </template>
      </el-table-column>
      <el-table-column :formatter="auditTime" label="审核时间"></el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page.sync="ruleForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="ruleForm.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <div class="forms">
      <el-button type="primary" @click="onSubmit">提交并审核</el-button>
      <el-button @click="onClear">取消</el-button>
    </div>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from '../../../common/utils';
export default {
  name: 'brokerAwardBatch',
  data() {
    return {
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        devId: '',
        awardType: ''
      },
      time: [],
      tableData: [],
      total: 0,
      devList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      idKey: "id" // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
    }
  },
  computed: {
    nodeAmounts() {
      let num = 0;
      num = utils.formatMoney(this.multipleSelectionAll.reduce((n,e) => n + e.nodeAmount,0))
      return `￥${num}`
    }
  },
  created() {
    this.init()
    this.list()
  },
  methods: {
    // 设置选中的方法
    setSelectRow() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return;
      }
      let idKey = this.idKey;
      let selectAllIds = [];
      let that = this;
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.multipleTable.clearSelection();
      for (var i = 0; i < this.tableData.length; i++) {
        if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
          this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
        }
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      let idKey = this.idKey;
      let that = this;
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection;
        console.log(this.multipleSelectionAll)
        return;
      }
      let selectAllIds = [];
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      console.log('总选择的key', selectAllIds)
      let selectIds = [];
      this.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      this.tableData.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
              that.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      setTimeout(()=>{
        this.changePageCoreRecordData()
      },500)
    },
    init() {
      this.axios.post(api.queryAllDevList,{}).then(res => {
        if(res.data.code === 200) {
          this.devList = res.data.data;
        }
      })
    },
    customerPhone(row) {
      return utils.formatPhoneNumber(row.customerPhone)
    },
    nodeAmount(row) {
      return `￥${utils.formatMoney(row.nodeAmount)}`
    },
    // 时间格式化
    auditTime(row) {
      return utils.getTimeString(row.auditTime)
    },
    // 是否可以选中
    checkboxT(row,index) {
      if(row.identityType == 0) {
        return false
      }else {
        return true
      }
    },
    
    handleSizeChange(size) {
      this.changePageCoreRecordData();
      this.ruleForm.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.changePageCoreRecordData();
      this.ruleForm.pageNum = page;
      this.list();
    },
    list() {
      this.axios.post(api.batchOrderList, this.ruleForm).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          setTimeout(() => {
              this.setSelectRow();
          }, 200);
        }
      });
    },
    // 提交并审核
    onSubmit() {
      let ids = [];
      this.multipleSelectionAll.forEach(item => {
        ids.push(item.id)
      })
      this.axios.post(api.batchSubmit,{ids:ids}).then(res=> {
        if(res.data.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$router.push('./brokerAward')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 取消
    onClear() {
      this.$router.push('./brokerAward')
    },
    // 查询
    onSearch() {
      this.ruleForm.pageNum = 1;
      this.list();
    },
    // 重置
    resetForm() {
      this.ruleForm = {
        pageNum: 1,
        pageSize: 10,
        devId: '',
        awardType: ''
      };
      this.time = [];
      this.list();
    }
  }
}
</script>
<style lang="stylus">
  .statistics
    font-size 14px
    width 100%
    background-color #e2f4fe;
    box-sizing border-box;
    padding-left 5px
    line-height 40px
    b
      color #2590fd
  .forms
    margin 20px auto 
    text-align center
</style>


